<template>
  <div id="app">
    <keep-alive>
          <component :is="zujian[currentindex]"></component>
      </keep-alive>
    <div class="footer">
    <div>
    <span @click="dianji(index)" v-for="(item,index) in foot" :key="index">{{item.name}}</span>
    </div>
   </div>
  </div>
</template>

<script>
import FirstPage from './components/FirstPage.vue'
import MainPage from './components/MainPage.vue'

export default {
  name: 'App',
  data(){
    return{
currentindex:0,
      zujian:[FirstPage,MainPage],
    foot:[
      {name:'首页'},
      {name:'爆爆团'},
      {name:'订单'},
      {name:'我的'}
    ]
    }
  },
  methods:{
    dianji(index){
      this.currentindex=index
    }
  },
  components: {
    FirstPage
    
  }
}
</script>

<style lang="css">
*{
  padding: 0;
  margin: 0;
}
.footer{
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    background-color: white;
    border-top:1px solid grey ;
}
.footer div{
   display: flex;
   justify-content: space-around;
   padding-top: 10px;
}
</style>
